import React, { useState, useEffect, useContext } from "react";
import { View, StyleSheet, Dimensions, Text, TouchableOpacity } from "react-native";
import Modal from "react-native-modal";
import { Icon, Button, Input } from "@rneui/themed";
import CommonContext from '@/utils/createContext'

const { width, scale } = Dimensions.get('window')
const ratio = width * scale / 1080

const AdvancedOptions = () => {

    const { modalVisible, setModalVisible, gasData, setGasData } = useContext(CommonContext)

    const [gasLimit, setGasLimit] = useState('');
    const [maxPriorityFee, setMaxPriorityFee] = useState('');
    const [maxPriorityFeeError, setMaxPriorityFeeError] = useState(false);
    const [maxFee, setMaxFee] = useState('');
    const [maxFeeError, setMaxFeeError] = useState(false);

    useEffect(() => {
        setGasLimit(gasData.gaslimit)
        setMaxPriorityFee(gasData.maxpriorityfeestatic)
        setMaxFee(gasData.maxfeestatic)
    }, [gasData]);

    const handlePressCancel = () => {
        setModalVisible(false)
    }

    const handlePressSave = () => {
        setGasData({
            ...gasData,
            gaslimit: gasLimit,
            maxpriorityfeestatic: maxPriorityFee,
            maxfeestatic: maxFee
        })
        setModalVisible(false)
    }

    const handlePressMinus = (type) => {
        switch (type) {
            case 'gasLimit':
                if (parseFloat(gasLimit) - 1000 >= 21000) {
                    setGasLimit((parseFloat(gasLimit) - 1000).toString())
                }
                break;
            case 'maxPriorityFee':
                if (parseFloat(maxPriorityFee) - 1 > 0) {
                    setMaxPriorityFee((parseFloat(maxPriorityFee) - 1).toString())
                } else {
                    setMaxPriorityFeeError(true)
                }
                break;
            case 'maxFee':
                if (parseFloat(maxFee) - 1 < parseFloat(maxPriorityFee)) {
                    setMaxFeeError(true)
                } else {
                    setMaxFee((parseFloat(maxFee) - 1).toString())
                }
                break;
            default:
                break;
        }
    }

    const handlePressPlus = (type) => {
        switch (type) {
            case 'gasLimit':
                setGasLimit((parseFloat(gasLimit) + 1000).toString())
                break;
            case 'maxPriorityFee':
                if (parseFloat(maxPriorityFee) + 1 >= 1) {
                    setMaxPriorityFee((parseFloat(maxPriorityFee) + 1).toString())
                } else {
                    setMaxPriorityFeeError(false)
                }
                break;
            case 'maxFee':
                if (parseFloat(maxFee) + 1 >= parseFloat(maxPriorityFee)) {
                    setMaxFee((parseFloat(maxFee) + 1).toString())
                } else {
                    setMaxFeeError(false)
                }
                break;
            default:
                break;
        }
    }

    return (
        <Modal
            isVisible={modalVisible}
            backdropColor='#000000'
            backdropOpacity={0.34}
            style={styles.container}
        >
            <View style={styles.bodyContent}>
                <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginTop: 10 * ratio }}>
                    <Text style={styles.title1}>Handling fee details</Text>
                    <Icon type="ionicon" name="close" color="#262626" size={25} style={{ marginRight: 23 * ratio }} onPress={handlePressCancel} />
                </View>
                <View style={{ alignItems: 'center' }}>
                    <View style={{ width: 255 * ratio, justifyContent: 'flex-start', marginTop: 15 * ratio }}>
                        <Text style={styles.title2}>Gas limit</Text>
                    </View>
                    <View style={{ width: 255 * ratio, justifyContent: 'flex-start', marginTop: 6 * ratio }}>
                        <Input
                            leftIcon={<TouchableOpacity style={styles.circle3} onPress={() => { handlePressMinus('gasLimit') }}>
                                <Icon type="entypo" name="minus" color="#5B6DFD" size={15} />
                            </TouchableOpacity>}
                            rightIcon={<TouchableOpacity style={styles.circle3} onPress={() => { handlePressPlus('gasLimit') }}>
                                <Icon type="entypo" name="plus" color="#5B6DFD" size={15} />
                            </TouchableOpacity>}
                            containerStyle={styles.text_input}
                            onChangeText={text => setGasLimit(text)}
                            value={gasLimit?.toString()}
                            inputContainerStyle={{ borderBottomWidth: 0, height: 30 * ratio }}
                            inputStyle={{ ...styles.title2, textAlign: 'center' }}
                        />
                    </View>
                    <View style={{ width: 255 * ratio, justifyContent: 'space-between', flexDirection: 'row', marginTop: 10 * ratio }}>
                        <Text style={styles.title2}>Max priority fee</Text>
                        <Text style={styles.title2}>Estimate: {gasData.maxpriorityfeestatic || '0.00'} GWEI</Text>
                    </View>
                    <View style={{ width: 255 * ratio, justifyContent: 'flex-start', marginTop: 6 * ratio }}>
                        <Input
                            leftIcon={<TouchableOpacity style={styles.circle3} onPress={() => { handlePressMinus('maxPriorityFee') }}>
                                <Icon type="entypo" name="minus" color="#5B6DFD" size={15} />
                            </TouchableOpacity>}
                            rightIcon={<TouchableOpacity style={styles.circle3} onPress={() => { handlePressPlus('maxPriorityFee') }}>
                                <Icon type="entypo" name="plus" color="#5B6DFD" size={15} />
                            </TouchableOpacity>}
                            containerStyle={styles.text_input}
                            onChangeText={text => {
                                if (parseFloat(text) > 0 && maxPriorityFeeError) {
                                    setMaxPriorityFeeError(false)
                                    setMaxPriorityFee(text)
                                } else if (!(parseFloat(text) > 0) && !maxPriorityFeeError) {
                                    setMaxPriorityFeeError(true)
                                    setMaxPriorityFee(1)
                                }
                            }}
                            value={maxPriorityFee?.toString()}
                            inputContainerStyle={{ borderBottomWidth: 0, height: 30 * ratio }}
                            inputStyle={{ ...styles.title2, textAlign: 'center' }}
                        />
                    </View>
                    {maxPriorityFeeError && <View style={{ width: 255 * ratio, justifyContent: 'flex-start', marginTop: 4 * ratio }}>
                        <Text style={styles.title3}>
                            The top priority cost of current network conditions is very low
                        </Text>
                    </View>}
                    <View style={{ width: 255 * ratio, justifyContent: 'space-between', flexDirection: 'row', marginTop: 10 * ratio }}>
                        <Text style={styles.title2}>Max fee</Text>
                        <Text style={styles.title2}>Estimate: {gasData.maxfeestatic || '0.00'} GWEI</Text>
                    </View>
                    <View style={{ width: 255 * ratio, justifyContent: 'flex-start', marginTop: 6 * ratio }}>
                        <Input
                            leftIcon={<TouchableOpacity style={styles.circle3} onPress={() => { handlePressMinus('maxFee') }}>
                                <Icon type="entypo" name="minus" color="#5B6DFD" size={15} />
                            </TouchableOpacity>}
                            rightIcon={<TouchableOpacity style={styles.circle3} onPress={() => { handlePressPlus('maxFee') }}>
                                <Icon type="entypo" name="plus" color="#5B6DFD" size={15} />
                            </TouchableOpacity>}
                            containerStyle={styles.text_input}
                            onChangeText={text => {
                                if (parseFloat(text) >= parseFloat(maxPriorityFee) && maxFeeError) {
                                    setMaxFeeError(false)
                                    setMaxFee(text)
                                } else if (!(parseFloat(text) >= parseFloat(maxPriorityFee)) && !maxFeeError) {
                                    setMaxFeeError(true)
                                    setMaxFee(maxPriorityFee)
                                }
                            }}
                            value={maxFee?.toString()}
                            inputContainerStyle={{ borderBottomWidth: 0, height: 29 * ratio }}
                            inputStyle={{ ...styles.title2, textAlign: 'center' }}
                        />
                    </View>
                    {maxFeeError && <View style={{ width: 255 * ratio, justifyContent: 'flex-start', marginTop: 4 * ratio }}>
                        <Text style={styles.title3}>
                            The maximum cost cannot be lower than the
                            maximum priority cost
                        </Text>
                    </View>}
                </View>
                <View style={{ alignItems: 'center', marginTop: 10 * ratio }}>
                    <Button buttonStyle={styles.button} onPress={handlePressSave}>
                        <Text style={{ ...styles.title2, color: '#FFFFFF' }}>Save</Text>
                    </Button>
                </View>
            </View>
        </Modal>
    )
}

const styles = StyleSheet.create({
    container: {
        justifyContent: 'flex-end',
        alignItems: 'center'
    },
    bodyContent: {
        width: 331 * ratio,
        height: 365 * ratio,
        backgroundColor: '#FFFFFF',
        borderTopLeftRadius: 18,
        borderTopRightRadius: 18,
        marginBottom: -20 * ratio
    },
    changeContent: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between'
    },
    circle1: {
        width: 19 * ratio,
        height: 19 * ratio,
        borderColor: '#707070',
        borderWidth: 1,
        borderRadius: 50,
        justifyContent: 'center',
        alignItems: 'center'
    },
    circle2: {
        width: 10 * ratio,
        height: 10 * ratio,
        borderRadius: 50
    },
    circle3: {
        width: 23 * ratio,
        height: 23 * ratio,
        borderRadius: 50,
        borderColor: '#D6D8DB',
        borderWidth: 1,
        justifyContent: 'center',
        alignItems: 'center',
        marginTop: -2 * ratio
    },
    divider1: {
        width: 0,
        height: 12 * ratio,
        borderColor: '#707070',
        borderWidth: 1
    },
    divider2: {
        width: 230 * ratio,
        height: 0,
        borderColor: '#707070',
        borderWidth: 1
    },
    title1: {
        fontSize: 15,
        fontFamily: 'Microsoft YaHei',
        fontWeight: 'bold',
        color: '#262626',
        lineHeight: 20,
        marginLeft: 22 * ratio
    },
    title2: {
        fontSize: 13,
        fontFamily: 'Microsoft YaHei',
        fontWeight: '400',
        color: '#707070',
        lineHeight: 18
    },
    title3: {
        fontSize: 12,
        fontFamily: 'Microsoft YaHei',
        fontWeight: '400',
        color: '#FF0000',
        lineHeight: 15
    },
    button: {
        width: 246 * ratio,
        height: 37 * ratio,
        backgroundColor: '#5B6DFD',
        borderRadius: 19
    },
    text_input: {
        width: 255 * ratio,
        height: 30 * ratio,
        backgroundColor: '#FDFDFD',
        borderWidth: 1,
        borderColor: 'D6D8DB',
        borderRadius: 3
    }
})
export default AdvancedOptions